<template>
  <!-- 表单按钮 -->
  <div class="submit-btn">
    <a-button type="primary" @click="showDrawer">
      <template #icon><PlusOutlined /></template>
      请假
    </a-button>
  </div>
  <a-drawer title="请假表" :width="720" :visible="visible" :body-style="{ paddingBottom: '80px' }" :footer-style="{ textAlign: 'right' }" @close="onClose">
    <a-form :model="submitForm" layout="vertical" :rules="rules">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="编号" name="userId">
            <a-input v-model:value="submitForm.userId" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="姓名" name="userName">
            <a-input v-model:value="submitForm.userName" disabled />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="请假类型" name="type">
            <a-select v-model:value="submitForm.type" placeholder="请选择请假类型">
              <a-select-option value="0">事假</a-select-option>
              <a-select-option value="1">产假</a-select-option>
              <a-select-option value="2">病假</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="起始时间-结束时间" name="timeRange">
            <!-- <a-date-picker @change="onStartTimeChange" v-model:value="submitForm.startTime" style="width: 100%" :get-popup-container="(trigger) => trigger.parentElement" show-time /> -->
            <a-range-picker v-model:value="timeRange" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm" :placeholder="['起始时间', '结束时间']" @change="onRangeChange" @ok="onRangeOk" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="请假天数" name="days">
            <a-input v-model:value="submitForm.days" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="12"> </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="请假理由" name="reason">
            <a-textarea v-model:value="submitForm.reason" :rows="4" placeholder="请输入内容" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #extra>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">提交</a-button>
      </a-space>
    </template>
  </a-drawer>
  <!-- 表格体 -->
  <MyForm ref="childForm" formT="0" permission="1"></MyForm>
</template>
<script>
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { defineComponent, ref, reactive, onMounted, nextTick } from 'vue'
import ApplyForm from '@/components/ApplyForm'
import MyForm from '@/components/MyForm'
import { useStore } from 'vuex'
// 引入时间格式化工具函数和时间差计算函数
import { formatTimeStamp, daysBetweenTimestamps } from '@/utils/tools'
import { Action } from '@/service'
import { result } from '@/utils/tools'
export default defineComponent({
  components: {
    SmileOutlined,
    DownOutlined,
    ApplyForm,
    MyForm,
  },
  setup() {
    const childForm = ref()

    // onMounted(() => {
    //   childForm.value.getMyLeaveForms()
    //   // console.log(childForm.value.getMyLeaveForms)
    // })

    const modal1Visible = ref(false)
    const store = useStore()
    const submitForm = reactive({
      userId: '',
      userName: '',
      type: '',
      startTime: null,
      endTime: null,
      days: 0,
      reason: '',
    })
    // 从vuex中初始化UserId 和 UserName
    submitForm.userId = store.state.myUserId
    submitForm.userName = store.state.role.userName

    const setModal1Visible = (open) => {
      modal1Visible.value = open
    }
    // 表单规则
    const rules = {
      userId: [
        {
          required: false,
        },
      ],
      userName: [
        {
          required: false,
        },
      ],
      days: [
        {
          required: false,
          message: '',
        },
      ],
      type: [
        {
          required: false,
          message: '请输入请假类型',
        },
      ],
      timeRange: [
        {
          required: false,
          message: '请选择时间',
        },
      ],
      reason: [
        {
          required: false,
          message: '请输入请假理由',
        },
      ],
    }
    const visible = ref(false)
    const showDrawer = () => {
      visible.value = true
    }
    const onClose = () => {
      visible.value = false
    }
    const submitAction = async () => {
      const res = await Action.addLeaveForm(submitForm.userId, submitForm.startTime, submitForm.endTime, submitForm.type, submitForm.reason)
      result(res).success(({ data }) => {
        message.success('提交成功')
        submitForm.startTime = null
        submitForm.endTime = null
        submitForm.type = ''
        submitForm.reason = ''
      })
    }
    // 表单提交
    const onSubmit = () => {
      if (!submitForm.type) {
        message.warning('请选择请假类型')
        return
      }
      if (!submitForm.startTime || !submitForm.endTime) {
        message.warning('请选择时间范围')
        return
      }
      if (!submitForm.reason.trim()) {
        message.warning('请输入请假理由')
        return
      }
      submitAction()
      timeRange.value = []
      visible.value = false
      nextTick(() => {
        childForm.value.getMyLeaveForms()
        // console.log('next tick')
      })
    }
    const timeRange = ref()
    // 开始时间被选则
    const onStartTimeChange = function (e) {
      submitForm.startTime = +e
      console.log('这是开始时间', +e)
    }
    const onRangeChange = function (e) {
      if (e[1] - e[0] <= 3600000) {
        e[0] = null;
        e[1] = null;
        message.warning('时间间隔不能小于一小时！')
        // console.log('这是change', +e[0])
        // console.log('这是change', +e[1])
      }

      if (!e) {
        submitForm.startTime = null
        submitForm.endTime = null
        submitForm.days = 0
      }
    }

    // 选择完开始结束时间后的回调
    const onRangeOk = function (e) {
      // console.log('这是ok', e[0])
      submitForm.startTime = formatTimeStamp(+e[0])
      submitForm.endTime = formatTimeStamp(+e[1])
      if (submitForm.startTime && submitForm.endTime) {
        submitForm.days = daysBetweenTimestamps(+e[0], +e[1])
      }
      // console.log(+e[0])
      // console.log(+e[1])
    }
    return {
      modal1Visible,
      setModal1Visible,
      rules,
      visible,
      showDrawer,
      onClose,
      submitForm,
      onSubmit,
      onStartTimeChange,
      onRangeChange,
      onRangeOk,
      childForm,
      timeRange
    }
  },
})
</script>
<style lang="scss">
.submit-btn {
  display: flex;
  flex-direction: row-reverse;
  margin: 10px 20px 30px 0px;
}

.apply-form {
  transform: translateX(-10%);
}
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    left: 70%;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>
